表格组件需求分析
常见的 PC 端表格使用场景包括：固定操作列、固定表头、添加/删除行、多选、排序、筛选等。一个完整的表格页面通常由三部分组成：
┌─────────────────────────┐
│ 搜索表单 (Form) │ ← 不在表格组件范围内
├─────────────────────────┤
│ 表格标题/工具栏 │
├─────────────────────────┤
│ │
│ 表格内容 (Table) │ ← 封装重点
│ │
├─────────────────────────┤
│ 分页器 (Pagination) │
└─────────────────────────┘
text
基础表格组件封装
基于 Element Plus 的 el-table 进行封装，将表格标题、表格主体和分页器组合为一个完整的业务表格组件。
组件设计思路
参考开源管理后台框架（如 pure-admin-table）的设计模式：
- 表格区域：使用
el-table渲染数据 - 分页区域：使用
el-pagination处理翻页 - 工具栏：可选的标题和操作按钮区域
核心结构
<template>
<div class="basic-table">
<!-- 表格标题/工具栏 -->
<div class="table-header" v-if="title">
<h3>{{ title }}</h3>
<slot name="toolbar" />
</div>
<!-- 表格主体 -->
<el-table
:data="tableData"
:border="border"
:stripe="stripe"
v-loading="loading"
@selection-change="handleSelectionChange"
>
<slot />
</el-table>
<!-- 分页器 -->
<div class="table-pagination" v-if="pagination">
<el-pagination
v-model:current-page="currentPage"
v-model:page-size="pageSize"
:total="total"
:page-sizes="[10, 20, 50, 100]"
layout="total, sizes, prev, pager, next, jumper"
/>
</div>
</div>
</template>
vue
Props 设计
interface BasicTableProps {
tableData: any[] // 表格数据
loading?: boolean // 加载状态
border?: boolean // 是否带边框
stripe?: boolean // 是否斑马纹
title?: string // 表格标题
pagination?: boolean // 是否显示分页
total?: number // 数据总条数
}
typescript
参考资源
- Element Plus Table 文档：https://element-plus.org/zh-CN/component/table.html
- pure-admin-table：封装了完整的表格+分页组件，可参考其 Props 设计和事件处理方式
- Element Plus 版本 2.3.5+ 支持完整的表格功能
↑